<template>
	<view class="container">
		<!-- 柔光背景 -->
		<view class="soft-bg"></view>
		<!-- 登录卡片 -->
		<view class="card" :class="{ 'fade-in': isLoaded }">
			<!-- 标题区 -->
			<view class="header">
				<text class="title">欢迎回来</text>
				<text class="subtitle">登录以继续您的旅程</text>
			</view>
			<!-- 表单 -->
			<view class="form">
				<!-- 用户名 -->
				<view :class="{ 'input-group': true, 'focused': uNameFocused }">
					<view class="input-icon"><text class="icon">👤</text></view>
					<input type="text" v-model="form.username" placeholder="请输入用户名/注册邮箱"
						class="input" @focus="uNameFocused = true" @blur="uNameFocused = false" />
				</view>
				<!-- 密码 -->
				<view :class="{ 'input-group': true, 'focused': pwdFocused }">
					<view class="input-icon"><text class="icon">🔒</text></view>
					<input type="text" v-model="form.password" :password="!showPassword" placeholder="请输入密码" 
						class="input" @focus="pwdFocused = true" @blur="pwdFocused = false" />
					<text class="toggle-txt" @click="togglePwd">{{ showPassword ? '隐藏' : '显示' }}密码</text>
				</view>
				<!-- 忘记密码 -->
				<navigator url="/pages/forget/forget" hover-class="none">
					<text class="forget-link">忘记密码？</text>
				</navigator>
				<!-- 登录按钮 -->
				<button class="btn-login" :disabled="loading" @click="handleLogin">
					<text v-if="!loading">登 录</text>
					<text v-else>登录中...</text>
				</button>
				<!-- 第三方登录 -->
				<view class="social-login">
					<text class="divider">或使用第三方账号登录</text>
					<view class="social-icons">
						<button class="social-btn wechat" @click="loginWithWechat">
							<image class="log-icon" src="/static/wechat.png" alt="wechat" mode="aspectFill"></image>
						</button>
						<button class="social-btn qq" @click="loginWithQQ">
							<text class="social-icon">Q</text>
						</button>
						<button class="social-btn weibo" @click="loginWithWeibo">
							<text class="social-icon">W</text>
						</button>
					</view>
				</view>
				<!-- 注册提示 -->
				<view class="register-tip">
					<text>还没有账号？</text>
					<navigator url="/pages/register/register" hover-class="none">
						<text class="register-link">立即注册</text>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { Auth } from '@/utils/auth.js'
	import { ref, reactive, onMounted } from 'vue'

	let loading      = ref(false)
	let isLoaded     = ref(false)
	let pwdFocused   = ref(false)
	let uNameFocused = ref(false)
	let showPassword = ref(false)

	const form = reactive({ username: '', password: '' })
	// 模拟加载完成后显示动画
	onMounted(() => { 
		setTimeout(()=>{isLoaded.value=true}, 100)
	})
	// 切换密码
	const togglePwd = ()=> {
		showPassword.value = !showPassword.value
	}
	// 登录逻辑
	const handleLogin = () => {
		if (!form.username.trim()) {
			uni.showToast({ title: '请输入用户名', icon: 'none' })
			return
		}
		if (!form.password) {
			uni.showToast({ title: '请输入密码', icon: 'none' })
			return
		}
		loading.value = true
		setTimeout(() => {
			loading.value = false
			Auth.setUserInfo({nickname: form.username, level: '普通会员'})
			uni.showToast({ title: '登录成功', icon: 'success' })
			uni.navigateTo({ url: '/pages/index/index' })
		}, 1500)
	}
	// 微信登录（获取 code）
	const loginWithWechat = () => {
		uni.showLoading({ title: '登录中...' })
		wx.getUserProfile({
			desc: '用于完善会员资料',
			success: (res) => {
				console.log('用户信息:', res.userInfo);
				wx.setStorageSync('userInfo', res.userInfo);
				wx.showToast({
					title: '登录成功',
					icon: 'success'
				});
				// 跳转回上一页或首页
				setTimeout(() => {
					wx.navigateBack({
						delta: 1
					});
				}, 1000);
			},
			fail: (err) => {
				console.log('授权失败:', err);
				wx.showToast({
					title: '授权已拒绝',
					icon: 'none'
				});
			}
		});
	}
	const loginWithQQ = () => uni.showToast({ title: 'QQ 登录', icon: 'none' })
	const loginWithWeibo = () => uni.showToast({ title: '微博登录', icon: 'none' })
</script>

<style scoped>
	/* 容器 */
	.container {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 100vh;
		overflow: hidden;
		background: #000;
	}

	/* 柔光背景 */
	.soft-bg {
		position: absolute;
		top: -30%;
		left: -100%;
		width: 300vw;
		height: 150vh;
		background: linear-gradient(0deg, #526fe1b5 0%, #a6efbde0 50%, #d30b0bfa 100%);
		animation: investigation 10s infinite linear;
	}
	
	@keyframes investigation  {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}
	
	/* 登录卡片 */
	.card {
		width: 90%;
		max-width: 720rpx;
		margin: 0rpx 40rpx;
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(20rpx);
		border-radius: 32rpx;
		padding: 70rpx 60rpx;
		box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.3);
		opacity: 0;
		transform: translateY(30rpx);
		transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.card.fade-in {
		opacity: 1;
		transform: translateY(0);
	}

	/* 标题 */
	.header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.title {
		color: #ffffff;
		font-size: 52rpx;
		font-weight: 700;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.subtitle {
		font-size: 28rpx;
		margin-top: 16rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 表单 */
	.form { position: relative; }

	/* 输入框组 */
	.input-group {
		display: flex;
		padding: 6rpx;
		align-items: center;
		border-radius: 16rpx;
		margin-bottom: 40rpx;
		transition: all 0.3s;
		border: 1px solid transparent;
		background: rgba(255, 255, 255, 0.3);
	}

	.input-group.focused {
		border: 1rpx solid #2bf989;
	}

	.input-icon {
		color: #666;
		width: 80rpx;
		text-align: center;
	}
	
	.toggle-txt {
		display: flex;
		margin-right: 18rpx;
		align-items: center;
		justify-content: center;
	}

	.icon { font-size: 36rpx; }

	.input {
		flex: 1;
		height: 88rpx;
		font-size: 30rpx;
		color: #333;
		background: transparent;
	}

	.input::placeholder { color: rgba(102, 102, 102, 0.5); }

	/* 忘记密码 */
	.forget-link {
		float: right;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 40rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}

	/* 登录按钮 */
	.btn-login {
		width: 100%;
		color: #fff;
		height: 96rpx;
		font-size: 34rpx;
		font-weight: 500;
		margin-top: 20rpx;
		border-radius: 16rpx;
		transition: all 0.3s;
		box-shadow: 0 15rpx 30rpx rgba(37, 117, 252, 0.3);
		background: linear-gradient(135deg, #6a11cb, #2575fc);
	}

	.btn-login:active {
		transform: translateY(2rpx);
		box-shadow: 0 10rpx 20rpx rgba(37, 117, 252, 0.2);
	}

	.btn-login[disabled] {
		color: #eee;
		background: #ccc;
		box-shadow: none;
	}

	/* 第三方登录 */
	.social-login {
		margin-top: 50rpx;
		text-align: center;
	}

	.divider {
		margin: 40rpx 0;
		font-size: 24rpx;
		position: relative;
		color: rgba(255, 255, 255, 0.7);
	}

	.divider::before,
	.divider::after {
		content: '';
		top: 50%;
		width: 30%;
		height: 1rpx;
		position: absolute;
		background: rgba(255, 255, 255, 0.4);
	}

	.divider::before { left: 0; }

	.divider::after { right: 0; }

	.social-icons {
		display: flex;
		gap: 40rpx;
		margin-top: 30rpx;
		justify-content: center;
	}

	.social-btn {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.3);
		transition: all 0.3s;
	}

	.social-btn.wechat { padding: 0; }

	.social-btn:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 0.4);
	}

	.social-icon { font-size: 36rpx; }
	.log-icon { width: 50rpx; height: 38rpx; }
	.qq { color: #1e90ff; }
	.weibo { color: #e74c3c; }
	.wechat { color: #2ecc71; }

	/* 注册提示 */
	.register-tip {
		display: flex;
		font-size: 26rpx;
		margin-top: 40rpx;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.8);
	}

	.register-link {
		color: #fff;
		margin-left: 10rpx;
		font-weight: 500;
		text-decoration: underline;
	}
</style>